<template>
    <view class="mine-container" :style="{ height: `${windowHeight}px` }">
        <view class="card">
            <view style="display: flex;flex: 4;">
                <view class="text-container">
                    <view class="item-flex">
                        <view class="label-planname">{{ trainInfo.trainName }}</view>
                        <view class="label-score">{{ trainInfo.score }}分</view>
                        <view class="label-icon">
                            <u-tag v-if="trainInfo.isPass == 1" text="合格" plain plainFill size="mini" type="success"
                                shape="circle"></u-tag>
                            <u-tag v-else text="不合格" plain plainFill size="mini" type="error" shape="circle"></u-tag>
                        </view>

                    </view>
                    <view>
                        <span class="time">{{ trainInfo.createTime }}</span>
                    </view>
                </view>
            </view>
            <view style="margin-right: 40rpx;color: #999999;">
                共{{ trainInfo.totalQu }}题
            </view>
        </view>
        <view class="integral-details">
            <view class="integral-list" v-if="questionList.length > 0">
                <u-list @scrolltolower="scrolltolower">
                    <u-list-item v-for="(item, index) in questionList" :key="index">
                        <view class="bg-list">
                            <view style="margin-top:10px">
                                <text style="font-size: 16px;font-weight: 600;">{{ item.questionName }}</text>
                            </view>
                            <view v-for="(item2, idnex2) in item.questionAnswerList" :key="index2">
                                <view v-if=" item.isRight ==1" class="my-boder-color-default" style="padding: 10px;margin-top: 5px;"
                                    :class="{ 'my-boder-color-right': item.chooseAnswer.includes(item2.questionAnswerOption) }">
                                    <text style="font-size:14px">{{ item2.questionAnswerOption }}{{
        item2.questionAnswerName }}</text>
                                </view>
                                <view v-else class="my-boder-color-default" style="padding: 10px;margin-top: 5px;"
                                    :class="{ 'my-boder-color-error': item.chooseAnswer.includes(item2.questionAnswerOption) }">
                                    <text style="font-size:14px">{{ item2.questionAnswerOption }}{{
        item2.questionAnswerName }}</text>
                                </view>
                            </view>
                            <view style="display: flex;flex-direction: row;margin-top: 10px; align-items: center;">
                                <view>
                                    <text style="font-size: 14px;">勾选答案：</text>
                                    <text style="color: red;">{{ item.chooseAnswer }}</text>
                                </view>
                                <view style="margin-left: 60rpx;">
                                    <text style="font-size: 14px;">正确答案：</text>
                                    <text style="color: #43CF7C;">{{ item.rightAnswer }}</text>
                                </view>
                            </view>
                        </view>
                    </u-list-item>
                </u-list>
            </view>
            <view v-else>
                <u-empty mode="data">
                </u-empty>
            </view>
        </view>
    </view>
</template>

<script>
import { studentTrainRecordInfo } from '@/api/train/index.js'
export default {
    data() {
        return {
            name: this.$store.state.user.name,
            version: getApp().globalData.config.appInfo.version,
            src: "/static/images/qrcode.png",
            status: "loadmore",
            list: [],
            pageNum: 1,
            pageSize: 10,
            listHeight: 0, // 新增高度计算变量
            trainRecordId: 0,
            trainInfo: {
                trainName: '入场教育',
                score: 0,
                isPass: '合格',
                createTime: '2024-07-24 10:00:00',
                totalQu: 0,
            },
            questionList: [], // 新增变量用于存储问题答案列表
        }
    },
    computed: {
        windowHeight() {
            return uni.getSystemInfoSync().windowHeight - 50
        }
    },
    onLoad(option) {
        // 获取参数值
        this.trainRecordId = option.trainRecordId;
        console.log(this.trainRecordId);
        this.getInfo();
    },
    mounted() {
    },
    methods: {
        async getInfo() {
            const { code, data, msg } = await studentTrainRecordInfo({ trainRecordId: this.trainRecordId });
            if (code == 200) {
                this.trainInfo = data;
                this.questionList = data.questionList; // 赋值给问题答案列表变量
                console.log( this.questionList);
            }
        },
        scrolltolower() {

        },
        loadmore() {
            if (this.status === "nomore") return;
            this.pageNum++;
            this.status = "loading";
            this.loadList();
        },
    }
}
</script>

<style lang="scss" scoped>
.header-section {
    padding: 20px 15px 45px 15px;
    background-color: #165DFF;
    color: white;

    .header-section-text {
        display: flex;
        align-items: center;
    }
}

.text {
    font-weight: bold;
    font-size: 30rpx;
    line-height: 30px;
    margin-left: 10rpx;
}

.card {
    display: flex;
    overflow: hidden;
    width: 100%;
    height: 140rpx;
    background-color: #fff;
    margin-top: 20rpx;
    align-items: center;
    // 方法二：直接使用border
    border-bottom: 2rpx solid #eee;

    // 排除最后一个元素的横线
    &:not(:last-child) {
        border-bottom: 2rpx solid #eee;
    }
}

.btton-container {
    flex: 2;
}

.text-container {
    padding: 10px;
    display: flex;
    height: 130rpx;
    flex-direction: column;
    justify-content: space-between;

    .item-flex {
        display: flex;
        align-items: center;
        align-items: center;
        line-height: 50rpx;
    }

    .label-planname {
        font-size: 36rpx;
        color: #333333;
        font-weight: bold;
        width: 300rpx;
        max-width: 400rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .label-score {
        font-size: 32rpx;
        color: #F53F3F;
        margin-left: 20rpx;
        width: 100rpx;
    }


    .label-icon {
        margin-left: 20rpx;
        width: 100rpx;
    }

    .time {
        color: #999999;
    }

}

.integral-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    margin-top: 20rpx
}

.integral-list {
    overflow-y: scroll;
    width: 100%;
}


.bg-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #fff;
    position: relative;
    top: 30px;
    margin-top: 10px;
    padding: 10px;
}

.my-boder-color-default {
    box-sizing: border-box;
    border: 1rpx solid #D7DBE1;
    border-radius: 10rpx;
    color: #333333;

}

.my-boder-color-right {
    box-sizing: border-box;
    border: 1rpx solid #43CF7C;
    border-radius: 10rpx;
    background-color: rgba(88, 204, 34, 0.2);
}

.my-boder-color-error {
    box-sizing: border-box;
    border: 1rpx solid #F53F3F;
    border-radius: 10rpx;
    background-color: rgba(184, 41, 5, 0.2);
}
</style>